<template>
  <div class="page-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="subsystem in subsystemList"
        :key="subsystem.id"
        :label="subsystem.name"
        :name="subsystem.id"
      />
    </el-tabs>
    <el-container>
      <el-aside width="250px" class="page-aside" v-drag v-collapse>
        <div class="title">
          <div class="title-content">菜单</div>
          <div class="title-button">
            <div
              v-if="(subsystemList.find(item => item.id === activeName) || {}).type !== '1'"
              class="button-list"
            >
              <div class="button-item">
                <ac-icon
                  iconId="018dca412c4e207388f7"
                  :style="'cursor: pointer;color: ' + (treeCheck ? 'rgb(0,133,246)' : '#999') + ';font-size: 18px;'"
                  :title="treeCheck ? '导入模式' : '导出模式'"
                  @click.stop="changeMode"
                />
              </div>
              <div class="button-item">
                <ac-icon
                  iconId="018ece4f749ec5911772"
                  style="cursor: pointer;color: rgb(0,133,246); font-size: 18px;"
                  title="导出菜单"
                  @click.stop="handleExport"
                />
              </div>
              <div class="button-item">
                <el-upload
                  action=""
                  :http-request="handleImport"
                  :show-file-list="false"
                  accept=".dat"
                >
                  <ac-icon
                    iconId="018ece4f70fcf0627f81"
                    style="cursor: pointer;color: rgb(0,133,246); font-size: 18px;"
                    title="导入菜单"
                  />
                </el-upload>
              </div>
            </div>
            <span class="title-button-box" @click="addMenu({})">
              <el-tooltip placement="bottom" content="新增菜单">
                <ac-icon iconId="018dc9c3efed46e8b927" size="18" />
              </el-tooltip>
            </span>
          </div>
        </div>
        <el-row>
          <el-input
            placeholder="菜单搜索"
            v-model="filterText"
            style="margin-right: 10px"
          ></el-input>
        </el-row>
        <el-row class="page-aside-grow">
          <el-tree
            ref="tree"
            v-loading="menuLoading"
            element-loading-text="数据加载中..."
            class="tree"
            :data="treeData"
            node-key="id"
            :props="treeProps"
            :highlight-current="true"
            :default-expanded-keys="treeExpand"
            :expand-on-click-node="true"
            @node-click="nodeClick"
            :filter-node-method="filterNode"
            :show-checkbox="treeCheck"
          >
            <template v-slot="{ data }">
              <div class="node-item">
                <span class="node-label" :title="data.text"><span>{{data.text}}</span></span>
                <div class="node-button">
                  <el-dropdown trigger="hover" placement="bottom-start">
                    <span class="node-button-item">
                      <ac-icon iconId="018dca6283a1e534a046" @click.stop />
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="addMenu(data.data)">
                          <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" />新增菜单
                        </el-dropdown-item>
                        <el-dropdown-item @click="editMenu(data.data)">
                          <ac-icon iconId="018dca6db20c6a3aaf68" color="#0085f6" style="margin-right: 5px" />修改菜单
                        </el-dropdown-item>
                        <el-dropdown-item
                          v-if="data.data.type === '页面' && data.data.pageId"
                          @click="showRelation(data.data.pageId)"
                        >
                          <ac-icon iconId="018ece4f6d46159ee26e" color="#43CCF8" style="margin-right: 5px" />关系图谱
                        </el-dropdown-item>
                        <el-dropdown-item @click="moveMenu(data.data)">
                          <ac-icon iconId="018dca444e0754edef13" color="#FF6600" style="margin-right: 5px" />移动菜单
                        </el-dropdown-item>
                        <el-dropdown-item @click="deleteMenu(data.data)">
                          <ac-icon iconId="018dc9c3efd3a0502886" color="#F56C6C" style="margin-right: 5px" />删除菜单
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
          </el-tree>
        </el-row>
      </el-aside>
      <el-main v-if="formData.button">
        <div class="right-main">
          <el-form
            ref="dataForm"
            label-width="85px"
            label-position="right"
            :model="formData"
            :rules="rules"
          >
            <el-row>
              <el-col :span="4">
                <el-form-item label="菜单名称" prop="name">
                  <el-input v-model="formData.name" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="菜单类型" prop="type">
                  <ac-select
                    v-if="(subsystemList.find(item => item.id === activeName) || {}).type === '1'"
                    v-model="formData.type"
                    options='菜单,目录'
                  />
                  <ac-select
                    v-if="(subsystemList.find(item => item.id === activeName) || {}).type !== '1'"
                    v-model="formData.type"
                    options='目录,页面,挂接,大屏,外链,流程'
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="上级菜单" prop="parentId">
                  <ac-tree
                    v-model="formData.parentId"
                    dataUrl="/system/menu/queryTree"
                    :query="{subsystemId: activeName}"
                    :leafSelect="false"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="排序" prop="ordinal">
                  <ac-number v-model="formData.ordinal" :point="0" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="默认显示" prop="defaultShow">
                  <ac-dict-switch v-model="formData.defaultShow" dictCode="dictYesNo" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="是否有效" prop="valid">
                  <ac-dict-switch v-model="formData.valid" dictCode="dictYesNo" />
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="formData.type === '挂接'">
                <el-form-item label="页面名称" prop="pageId">
                  <ac-tree
                    v-model="formData.pageId"
                    dataUrl="/system/page/queryTree"
                    type-select="page"
                    :leafSelect="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="formData.type === '大屏'">
                <el-form-item label="大屏页面" prop="pageId">
                  <ac-tree
                    v-model="formData.pageId"
                    dataUrl="/system/page/queryTree"
                    :query="{type: '可视化', layoutMode: '大屏'}"
                    type-select="page"
                    :leafSelect="true"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="formData.type === '大屏' || formData.type === '外链'">
                <el-form-item label="打开方式" prop="linkOpenMode">
                  <ac-select
                    v-model="formData.linkOpenMode"
                    :options='[{key: "1", value: "内嵌"},{key: "2", value: "新窗口"}]'
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="formData.type === '外链'">
                <el-form-item label="外链来源" prop="linkSource">
                  <ac-select
                    v-model="formData.linkSource"
                    :options='[{key: "1", value: "录入"},{key: "2", value: "脚本"}]'
                  />
                </el-form-item>
              </el-col>
              <el-col :span="14" v-if="formData.type === '外链' && formData.linkSource === '1'">
                <el-form-item label="外链地址" prop="linkUrl">
                  <el-input v-model="formData.linkUrl" />
                </el-form-item>
              </el-col>
              <el-col :span="14" v-if="formData.type === '外链' && formData.linkSource === '2'">
                <el-form-item label="外链脚本" prop="linkScriptId">
                  <ac-tree
                    v-model="formData.linkScriptId"
                    data-url="/system/scriptGroovy/queryTree"
                    type-select="script"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="formData.type === '流程'">
                <el-form-item label="流程名称" prop="flowId">
                  <ac-remote-select
                    v-model="formData.flowId"
                    dataUrl="/system/flow/queryPage"
                    :option="{id: formData.flowId, name: formData.flowName}"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="formData.type === '流程'">
                <el-form-item label="保存后跳转" prop="flowJumpId">
                  <ac-tree
                    v-model="formData.flowJumpId"
                    dataUrl="/system/menu/queryTree"
                    :query="{subsystemId: activeName}"
                    :leafSelect="false"
                  />
                </el-form-item>
              </el-col>
              <el-col
                v-if="(formData.type === '页面' || formData.type === '挂接')
                  && (subsystemList.find(item => item.id === activeName) || {}).type === '2'"
                :span="4"
              >
                <el-form-item label="布局页面" prop="layoutPageId">
                  <ac-tree
                    v-model="formData.layoutPageId"
                    dataUrl="/system/page/queryTree"
                    :leafSelect="true"
                  />
                </el-form-item>
              </el-col>
              <el-col
                v-if="(subsystemList.find(item => item.id === activeName) || {}).type === '2'"
                :span="4"
              >
                <el-form-item label="路由页面" prop="onlyRoute">
                  <ac-dict-switch v-model="formData.onlyRoute" dictCode="dictYesNo" />
                </el-form-item>
              </el-col>
              <el-col
                v-if="(subsystemList.find(item => item.id === activeName) || {}).type === '2'
                  && (formData.type === '页面' || formData.type === '挂接')"
                :span="4"
              >
                <el-form-item label="路由参数" prop="paramJson">
                  <ac-icon style="cursor: pointer" iconId="018ece4f712124866f78" @click="openParamDialog" />
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formData.type === '菜单'">
                <el-form-item label="菜单路径" prop="vuePath">
                  <el-input v-model="formData.vuePath" />
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formData.type === '菜单'">
                <el-form-item label="数据地址" prop="url">
                  <el-input v-model="formData.url" />
                </el-form-item>
              </el-col>
              <el-col
                :span="24"
                v-if="currSubsystem
                  && currSubsystem.type === '2'
                  && formData.type === '页面'
                  && shareUrl"
              >
                <el-form-item label="外链地址" prop="url">
                  <el-input v-model="shareUrl" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <ac-edit-table
            v-if="formData.type === '菜单'"
            ref="editTable"
            width="100%"
            style="width: 100%"
            tips="权限按钮"
            :columns="privilegeColumns"
            :rules="privilegeRules"
            :dataList="formData.privilegeList"
          ></ac-edit-table>
          <PageEdit ref="page" v-if="formData.type === '页面'" :options="pageData" />
        </div>
        <div class="button-box">
          <el-button
            v-if="formData.id && formData.pageId"
            type="success"
            @click="showRelation(formData.pageId)"
          >关系图谱</el-button>
          <el-button
            style="margin-left: 8px;"
            type="primary"
            :loading="editLoading"
            @click="submitForm"
          >提交</el-button>
        </div>
      </el-main>
    </el-container>

    <!--移动菜单-->
    <el-dialog
      v-model="moveVisible"
      title="移动菜单"
      width="500px"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
    >
      <el-form
        ref="moveForm"
        label-width="120px"
        label-position="right"
        :model="moveData"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="菜单">
              <ac-input
                v-model="moveData.name"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="移动到" prop="parentId">
              <ac-tree
                v-model="moveData.parentId"
                dataUrl="/system/menu/queryTree"
                :query="{subsystemId: activeName}"
                :leafSelect="false"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button
          size="default"
          type="info"
          @click="moveVisible=false"
        >取消</el-button>
        <el-button
          type="primary"
          size="default"
          :loading="moveLoading"
          @click="submitMoveForm"
        >提交</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="relationVisible"
      class="no-padding"
      title="关系图谱"
      :close-on-click-modal="false"
      destroy-on-close
      fullscreen
    >
      <relation-page :pageId="relationPageId" />
      <template #footer>
        <el-button
          size="default"
          type="info"
          @click="relationVisible=false"
        >关闭</el-button>
      </template>
    </el-dialog>

    <!--设置路由参数-->
    <el-dialog
      v-model="paramVisible"
      title="路由参数"
      width="600px"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
    >
      <el-form
        label-width="90px"
        label-position="right"
        :model="paramData"
      >
        <el-form-item
          v-if="paramData.paramList"
          label="出参配置"
          prop="pageId"
        >
          <div style="display: flex;flex-direction: column">
            <div
              class="param-item"
              v-for="(param, index) in paramData.paramList"
              :key="index"
            >
              <div class="param-field">
                <ac-input v-model="param.filterValue" />
              </div>
              <div class="param-split"><ac-icon iconId="018eecae20bd010c2adf" /></div>
              <div class="param-field">
                <ac-input v-model="param.pageParamName" />
              </div>
              <div class="param-split" style="cursor: pointer">
                <ac-icon color="red" size="15" iconId="018dc9c3efd3a0502886" @click="deleteParam(index)"/>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          size="default"
          type="info"
          @click="paramVisible=false"
        >取消</el-button>
        <el-button
          size="default"
          type="success"
          @click="addParam"
        >添加参数</el-button>
        <el-button
          type="primary"
          size="default"
          @click="submitParamForm"
        >确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, nextTick, computed } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import api from '@/http/api';
import RelationPage from "@/admin/codeless/relationPage.vue";
import PageEdit from "@/admin/codeless/pageEdit.vue";
import tool from "@/utils/tool";

const defaultFormData = ref({
  id: '',
  parentId: '0',
  type: '页面',
  name: '',
  icon: '',
  vuePath: '',
  url: '',
  defaultShow: '0',
  valid: '1',
  needPermit: '1',
  ordinal: 1,
  privilegeList: []
});

const activeName = ref('');
const currSubsystem = ref(null);
const subsystemList = ref([]);

const filterText = ref('');
const treeData = ref([]);
const treeProps = ref({
  children: 'children',
  label: 'text'
});
const treeExpand = ref(['0']);
const menuLoading = ref(true);

const editLoading = ref(false);
const formData = ref(defaultFormData.value);
const rules = ref({
  name: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
  type: [{required: true, message: '请选择菜单类型', trigger: ['blur', 'change']}],
  valid: [{required: true, message: '请选择是否有效', trigger: ['blur', 'change']}],
  ordinal: [
    {required: true, message: '请输入排序', trigger: 'blur'},
    {type: 'number', message: '排序必须为数字', trigger: 'blur'}]
});
const privilegeColumns = ref([
  {prop: "name", label: "名称", minWidth: 110},
  {prop: "type", label: "类型", width: 80, type: 'select', options: '按钮,权限'},
  {prop: "buttonLevel", label: "按钮级别", width: 80, type: 'select', options: '表级,行级,全部', show: (data) => data['type'] === '按钮'},
  {prop: "buttonClass", label: "按钮样式", width: 80, type: 'select', allowCreate: true, options: () => {
      return [
        {key: 'primary', value: '蓝色'},
        {key: 'success', value: '绿色'},
        {key: 'warning', value: '黄色'},
        {key: 'info', value: '灰色'},
        {key: 'danger', value: '红色'},
      ]
    },
    show: (data) => data['type'] === '按钮'
  },
  {prop: "buttonIcon", label: "按钮图标", width: 70, type: 'icon-select',
    allowCreate: true, show: (data) => data['type'] === '按钮'
  },
  {prop: "buttonType", label: "按钮类型", width: 120, type: 'select', options: () => {
      return [
        {key: 'add', value: '新增'},
        {key: 'addSub', value: '新增子项'},
        {key: 'edit', value: '编辑'},
        {key: 'delete', value: '删除'},
        {key: 'ajax', value: 'Ajax提交'},
        {key: 'downloadExcel', value: 'Excel下载'},
        {key: 'importExcel', value: 'Excel导入'},
        {key: 'open', value: '开启'},
        {key: 'close', value: '关闭'},
      ]
    },
    allowCreate: true, show: (data) => data['type'] === '按钮'
  },
  {prop: "selectedMode", label: "选择方式", width: 110, type: 'select', options: () => {
      return [
        {key: '1', value: '不用选择'},
        {key: '2', value: '单选(必选)'},
        {key: '3', value: '多选(可选)'},
        {key: '4', value: '多选(必选)'},
      ]
    },
    show: (data) => data['type'] === '按钮'
  },
  {prop: "dataSourUrl", label: "数据来源地址", minWidth: 120, show: (data) => data['type'] === '按钮'},
  {prop: "dataDestUrl", label: "数据目标地址", minWidth: 140, show: (data) => data['type'] === '按钮'},
  {prop: "clickTips", label: "点击提示", minWidth: 120, show: (data) => data['type'] === '按钮'},
  {prop: "ordinal", label: "排序", width: 80, type: 'number'},
]);
const privilegeRules = ref({
  name: [{required: true, message: '请输入按钮名称', trigger: 'blur'}],
  type: [{required: true, message: '请选择类型', trigger: ['blur', 'change']}],
  buttonLevel: [{required: true, message: '请选择按钮级别', trigger: 'change'}],
  buttonType: [{required: true, message: '请选择按钮类型', trigger: 'change'}],
  selectedMode: [{required: true, message: '请选择选择方式', trigger: 'change'}],
  ordinal: [
    {required: true, message: '请输入排序', trigger: 'blur'},
    {type: 'number', message: '排序必须为数字', trigger: 'blur'}]
});

const page = ref();
const pageData = ref({});

const tree = ref();
const dataTable = ref();
const dataForm = ref();
const editTable = ref();

const moveVisible = ref(false);
const moveLoading = ref(false);
const moveForm = ref();
const moveData = ref({});

const relationVisible = ref(false);
const relationPageId = ref('');
const treeCheck = ref(false);

const paramVisible = ref(false);
const paramData = ref({paramList: []});

const changeMode = () => {
  treeCheck.value = !treeCheck.value;
  if (treeCheck.value) {
    tree.value.setCheckedNodes([]);
  }
}

const handleExport = () => {
  const nodes = tree.value.getCheckedNodes(false, true);
  if (!nodes || nodes.length === 0) {
    ElMessage.error("请先选择菜单！");
    return;
  }
  const data = nodes.map(item => item.id);
  api.downloadFile('/system/menu/exportData', {ids: data}).then(res => api.saveFileLocal(res));
};

const handleImport = (file) => {
  api.uploadFile('/system/menu/importData', {'file': file.file}).then((res) => {
    ElMessage.success(res.message);
    loadTreeData(activeName.value);
  });
};

const handleClick = (tab) => {
  treeCheck.value = false;
  activeName.value = tab.paneName;
  currSubsystem.value = subsystemList.value.find(item => item.id === activeName.value);
  formData.value = Object.assign({}, defaultFormData.value);
  loadTreeData(activeName.value);
};

const filterNode = (value, data) => {
  if (!value) return true;
  return data.text.indexOf(value) >= 0;
};

const currNode = ref(null);
const nodeClick = (data, treeNode) => {
  if (currNode.value && currNode.value.id === data.id) {
    treeNode.checked = !treeNode.checked;
  } else {
    treeNode.checked = true;
  }

  if (treeNode.checked) {
    currNode.value = data;
    editMenu(data);
  } else {
    tree.value.setCurrentKey(null);
    editMenu({});
  }
};

const addMenu = (data) => {
  const type = (subsystemList.value.find(item => item.id === activeName.value) || {}).type;
  if (type === '2') {
    formData.value = Object.assign({},
      {parentId: data.id || '', type: '页面', valid: '1', ordinal: 1},
      {button: {dataDestUrl: '/system/menu/save'}});
    pageData.value = { type: '可视化' };
  } else {
    formData.value = Object.assign({},
      {parentId: data.id || '', type: type === '1' ? '菜单' : '页面', valid: '1', ordinal: 1},
      {button: {dataDestUrl: '/system/menu/save'}});
    pageData.value = { type: '' };
  }
  clearValidate();
};

const editMenu = (data) => {
  pageData.value = {};
  if (data.id) {
    api.post('/system/menu/queryBy', {id: data.id}).then(res => {
      formData.value = Object.assign({}, res.data, {button: {dataDestUrl: '/system/menu/save'}});
      if (res.data.pageId) {
        api.post('/system/page/queryBy', {id: res.data.pageId}).then(page => {
          pageData.value = page.data;
          clearValidate();
        });
      }
      clearValidate();
    }).catch(() => {});
    clearValidate();
  } else {
    addMenu({});
  }
};

const clearValidate = () => {
  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
    page.value && page.value.clearValidate();
  });
};

const moveMenu = (data) => {
  moveVisible.value = true;
  moveData.value = { id: data.id, name: data.name, parentId: data.parentId };
  moveForm.value && moveForm.value.resetFields();
};

const submitMoveForm = () => {
  moveForm.value && moveForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        moveLoading.value = true;
        const data = {id: moveData.value.id, parentId: moveData.value.parentId};
        const url = '/system/menu/updateParentId';
        api.post(url, data).then(res => {
          ElMessage.success(res.message);
          moveVisible.value = false;
          moveLoading.value = false;
          treeExpand.value.push(res.data.id || '0');
          loadTreeData(activeName.value);
        }).catch(() => {
          moveLoading.value = false;
        });
      }).catch(() => {});
    }
  });
};

const deleteMenu = (data) => {
  const url = '/system/menu/delete';
  ElMessageBox.confirm('请确认是否删除【' + data.name + '】？', '提示', {type: 'warning'}).then(() => {
    api.post(url, {id: data.id}).then(res => {
      ElMessage.success(res.message);
      treeExpand.value.push(data.parentId || '0');
      loadTreeData(activeName.value);
    });
  }).catch(() => {});
};

const submitForm = async() => {
  if (dataForm.value && !(await dataForm.value.validate())) return;
  if (editTable.value && !(await editTable.value.validate())) return;
  if (page.value && !(await page.value.validate())) return;

  ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
    formData.value.subsystemId = activeName.value;
    formData.value.privilegeList = editTable.value && editTable.value.getList() || [];
    formData.value.page = page.value && page.value.getData() || {};
    api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
      editMenu(res.data);
      ElMessage.success(res.message);
      editLoading.value = false;
      treeExpand.value.push(res.data.id || '0');
      loadTreeData(activeName.value);
    }).catch(() => {
      editLoading.value = false;
    });
  }).catch(()=>{});
};

const openParamDialog = () => {
  let paramJson = JSON.parse(formData.value.paramJson || '{}');
  if (!paramJson || !paramJson.paramList) {
    paramJson = {paramList: []};
  }

  if (formData.value.pageId) {
    api.post('/system/pageParam/queryList', {pageId: formData.value.pageId}).then(res => {
      const pageParamList = res.data || [];
      pageParamList.forEach(pageParam => {
        const fieldParam = paramJson.paramList.find(item => item.pageParamName === pageParam.name);
        if (!fieldParam) {
          paramJson.paramList.push({pageParamName: pageParam.name});
        }
      });

      paramData.value = paramJson;
      paramVisible.value = true;
    });
  } else {
    paramData.value = paramJson;
    paramVisible.value = true;
  }
};

const addParam = () => {
  paramData.value.paramList.push({});
};

const deleteParam = (index) => {
  paramData.value.paramList.splice(index, 1);
};

const submitParamForm = () => {
  if (!paramData.value || !paramData.value.paramList || paramData.value.paramList.length === 0) {
    formData.value.paramJson = '';
  } else {
    formData.value.paramJson = JSON.stringify(paramData.value);
  }
  paramVisible.value = false;
};

const loadTreeData = (subsystemId) => {
  menuLoading.value = true;
  api.post('/system/menu/queryTree', {subsystemId: subsystemId}).then(res => {
    treeData.value = res.data.children || [];
    menuLoading.value = false;
  }).catch(() => {
    menuLoading.value = false;
  });

  nextTick(() => {
    dataTable.value && dataTable.value.refreshPage();
  })
};

const loadSubsystem = () => {
  api.post('/business/subsystem/list').then(res => {
    if (res.code === '1') {
      subsystemList.value = res.data || [];
      if (subsystemList.value.length > 0) {
        activeName.value = subsystemList.value[0].id;
        loadTreeData(activeName.value);
      }
    }
  });
};

const showRelation = (pageId) => {
  relationPageId.value = pageId;
  relationVisible.value = true;
};

const shareUrl = computed(() => {
  if (!formData.value || !formData.value.id || !formData.value.pageId) return '';
  return tool.getBaseUrl() + '/portal.html#/home/' + formData.value.id + '/' + formData.value.pageId;
});

watch(() => filterText.value, (val) => {
  tree.value.filter(val)
});

onMounted(() => {
  loadSubsystem();
});
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.right-main {
  overflow: auto;
  flex-grow: 1;
  height: 1px;
  display: flex;
  flex-direction: column;

  :deep(.table-box) {
    flex-grow: 0!important;
    height: unset!important;
  }

  :deep(.page-container) {
    width: 100%!important;
    height: unset!important;
    padding: 0!important;

    .page-relation {
      min-height: 800px;
    }
  }
}

.button-box {
  width: 100%;
  text-align: right;
  padding-top: 10px;
}
.title {
  display: flex;
  flex-direction: row;
  margin-right: 10px;
  height: 40px;
  align-items: center;

  .title-content {
    flex-grow: 1;
    font-size: 18px;
  }
  .title-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .title-button .button-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    .button-item {
      margin: 0 5px 0 5px;
    }
  }
  .title-button .title-button-box {
    height: 30px;
    width: 40px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
  }

  .title-button .title-button-box:hover {
    background: #eaeaea;
    border: none;
  }

  .title-button .title-button-box:focus-visible {
    outline: unset;
  }
}

.filter-box {
  margin-right: 10px;
}

.tree :deep(.el-tree-node__content) {
  height: 40px!important;
}

.page-aside-grow {
  width: 100% !important;

  :deep(.el-tree) {
    display: flex;
    flex-direction: column;
    width: 1px !important;
  }

  :deep(.el-tree-node) {
    display: flex;
    flex-direction: column;
    width: 100% !important;
  }

  :deep(.el-tree-node__content) {
    display: flex;
    flex-grow: 1;
  }
}
:deep(.el-tree-node:not(.is-current):focus>.el-tree-node__content) {
  background-color: unset!important;
}
:deep(.el-tree-node:focus>.el-tree-node__content) {
  background-color: unset!important;
}
:deep(.el-tree-node:focus>.el-tree-node__content:hover) {
  background-color: #f5f7fa!important;
}
:deep(.el-tree-node.is-current:focus>.el-tree-node__content) {
  background-color: #ecf5ff!important;
}
.node-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;

  .node-label {
    flex-grow: 1;
    width: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;

    > span {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .node-button {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .node-button .node-button-item {
    height: 30px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
  .node-button .node-button-item:focus-visible {
    outline: unset;
  }
}
.node-item:hover {
  .node-button .node-button-item:hover {
    background: #eaeaea;
  }
}
.param-item {
  display: flex;
  flex-direction: row;
  .param-field {
    width: 180px;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
  }
  .param-split {
    width: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  .param-page {
    flex-grow: 1;
  }
}
.param-item+.param-item {
  margin-top: 5px;
}
</style>